<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>HeadlineTrail</title> <link rel="stylesheet" href="style.css"> <link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>📰</text></svg>"> </head> <body> <header> <h1>📰 HeadlineTrail</h1> <p>Stay informed with the latest news stories, enhanced with historical context and key term definitions.</p> </header> <main> <!-- Filter Controls Container --> <div id="filter-controls"> <input type="text" id="search-input" placeholder="Search keywords..." aria-label="Search articles"> <select id="sort-select" aria-label="Sort articles by"> <option value="Newest First">Newest First</option> <option value="Oldest First">Oldest First</option> <option value="A-Z">Title A-Z</option> <option value="Z-A">Title Z-A</option> </select> <select id="category-select" aria-label="Filter by category"> <option value="All Categories">All Categories</option> {/* Options loaded dynamically */} </select> <select id="month-select" aria-label="Filter by month"> <option value="All Months">All Months</option> {/* Options loaded dynamically */} </select> <select id="day-select" aria-label="Filter by day"> <option value="All Days">All Days</option> {/* Options loaded dynamically */} </select> <button id="refresh-button" title="Fetch latest news"> 🔄 Fetch Latest News </button> </div> <hr class="filter-divider"> <!-- Main Content Area --> <div id="content-area"> <div id="loading-indicator" style="display: none; text-align: center; padding: 2em;"> 🔄 Loading articles... </div> <div id="error-message" style="display: none;"></div> <div id="no-results-message" style="display: none;"></div> <div id="news-grid" class="view active-view"> <div class="news-card" data-article-id="https://www.cbssports.com/nba/news/2025-nba-draft-tracker-live-updates-picks-grades-news-draft-order-cooper-flagg-goes-no-1-to-mavericks/live/"> <img src="https://sportshub.cbsistatic.com/i/r/2025/06/25/8c2e8365-710b-46b2-8694-b1ad96631f50/thumbnail/1200x675/ce226466d364f2d2625350d2c8c2dd49/gettyimages-2222152859-2.jpg" alt="" onerror="this.onerror=null;this.src='https://images.unsplash.com/photo-1586339949916-3e9457bef6d3?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=600&q=80';"> <div class="card-content"> <h6>2025 NBA Draft tracker: Live updates, picks, grades, news, draft order, Cooper Flagg goes No. 1 to Mavericks - CBS Sports</h6> <div class="caption">CBS Sports | Today, Jun 26</div> <button>Read Article</button> </div> </div> </div> <div id="article-detail" class="view"> <button id="back-button">⬅️ Back to Articles</button> <hr> <div class="article-layout"> <div class="article-main"> <h1 id="detail-title"></h1> <div id="detail-caption" class="caption"></div> <img id="detail-image" src="" alt="Article Image" style="display: none;"> <div id="detail-link-container"></div> <h2>Article Content</h2> <hr class="content-divider"> <div id="detail-content"></div> <div id="read-more-container" class="read-more-section"> <!-- Fallback button will be inserted here when needed --> </div> </div> <div class="article-sidebar"> <div class="sidebar-section"> <h2>📅 Historical Context Timeline</h2> <div id="detail-timeline"></div> </div> <div class="sidebar-section"> <h2>📘 Glossary of Terms</h2> <div id="detail-glossary"></div> </div> </div> </div> </div> </div> </main> <footer> <p>HeadlineTrail - News with Context</p> </footer> <script src="script.js"></script> </body> </html>